<template>
  <div class="card image-content img-box item animated bounceIn"
     ref="card"
     @mousemove="move"
     @mouseleave="leave"
     @mouseover="over"
  >
    <div class="reflection" ref="refl"></div>
    <img class="ls-is-cached lazyloaded" v-lazy="img" :onerror="errorImage" align="center"/>
  </div>
</template>

<script>
export default {
  name: 'AntsPhotoCard',
  props: ['img', 'link'],
  data() {
    return {
      debounce: null,
      errorImage: 'this.src="' + require('../../assets/images/加载失败.png') + '"'  ,
    }
  },
  methods: {
    over() {
      const refl = this.$refs.refl
      refl.style.opacity = 1
    },
    leave() {
      const card = this.$refs.card
      const refl = this.$refs.refl
      card.style.transform = `perspective(300px) scale(1)`
      refl.style.opacity = 0
    },

    move() {
      const card = this.$refs.card
      const refl = this.$refs.refl

      const relX = (event.offsetX + 1) / card.offsetWidth
      const relY = (event.offsetY + 1) / card.offsetHeight
      const rotY = `rotateY(${(relX - 0.3) * 30}deg)`
      const rotX = `rotateX(${(relY - 0.3) * -30}deg)`
      card.style.transform = `perspective(300px) scale(1.5) ${rotY} ${rotX}`

      const lightX = this.scale(relX, 0, 1, 150, -50)
      const lightY = this.scale(relY, 0, 1, 30, -100)
      const lightConstrain = Math.min(Math.max(relY, 0.3), 0.7)
      const lightOpacity = this.scale(lightConstrain, 0.3, 1, 1, 0) * 255
      const lightShade = `rgba(${lightOpacity}, ${lightOpacity}, ${lightOpacity}, 1)`
      const lightShadeBlack = `rgba(0, 0, 0, 1)`
      refl.style.backgroundImage = `radial-gradient(circle at ${lightX}% ${lightY}%, ${lightShade} 5%, ${lightShadeBlack})`
    },
    scale: (val, inMin, inMax, outMin, outMax) =>
      outMin + (val - inMin) * (outMax - outMin) / (inMax - inMin)
  }
}
</script>
<style scoped>
.my-waterfall img {
  display: block;
  min-width: 100%;
  height: 140px;
  object-fit: cover;
  cursor: pointer;
  transition: all 0.6s;
  border-radius: 10px;
}
.img-box {
  margin: 5px;
  flex-grow: 1;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.card:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
.card:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  border-radius: 10px;
}
</style>

